<template>

    <div class="list">
        <div class="header">
            <van-nav-bar @click-left="$router.back()">
                <template #left>
                    <svg class="icon " aria-hidden="true">
                        <use xlink:href="#icon-xitongfanhui"></use>
                    </svg>
                </template>
                <template #title>
                    <van-search background="#5E81B5" placeholder="请输入搜索关键词">
                        <template #left-icon>
                            <svg class="icon searchIcon" aria-hidden="true">
                                <use xlink:href="#icon-sousuo"></use>
                            </svg>
                        </template>
                    </van-search>
                </template>
                <template #right>
                    <svg class="icon " aria-hidden="true">
                        <use xlink:href="#icon-androidgengduo"></use>
                    </svg>
                </template>
            </van-nav-bar>
        </div>
        <ul class="content">
            <van-list :immediate-check="false" v-model="loading" :finished="finished" @load="getList" finished-text="没有更多了">
                <li class="item" v-for="item in list" :key="item._id"
                    @click="$router.push({ name: 'Detail', query: { article_id: item._id } })">
                    <div class="top" :class="{ imgOnec: item.poster_type == 2, imgTwoc: item.poster_type == 3 }">
                        <div class="title"><span>{{ item.title }}</span></div>
                        <div class="image" v-show="item.imageSrc.length != 0">
                            <img @error="imgError" :src="img" alt="" v-for="img in item.imageSrc" :key="img.id">
                        </div>
                    </div>
                    <div class="footer">
                        <span>作者:{{ item.author }}</span>
                        <em>时间:{{ item.time | conversion }}</em>
                        <em>评论数:{{ item.comment }}</em>
                        <van-icon name="cross" />
                    </div>
                </li>
            </van-list>
        </ul>
    </div>
</template>

<script>

import { Button, Search, Cell, List } from "vant";
import { search } from "@/API/api";
export default {
    data() {
        return {
            list: [],
            defaultImg: require("@/assets/2.jpg"),
            loading: false,
            finished: false,
            skip: 0,
            limit: 10,
        };
    },
    components: {
        [Search.name]: Search,
        [Button.name]: Button,
        [List.name]: List,
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            let { skip, limit } = this
            let key_word = this.$route.query.key_word
            search({
                key_word, skip, limit
            }).then(({ code, count, data }) => {

                if (code == 0) {
                    this.list.push(...data)
                    this.skip = this.list.length
                    if (this.list.length >= count) {
                        this.finished = true
                    }else{
                        this.loading=false
                    }
                }
            })
        },
        imgError() {
            let img = event.srcElement;
            img.src = this.defaultImg;
            img.onerror = null
        }
    },




}
</script>

<style lang="less" scoped>
::v-deep .van-search__content {
    border-radius: 10px;
}

::v-deep .van-nav-bar {
    background-color: #5e81b5;
    overflow: hidden;
}

.list {
    width: 375px;
    background-color: rgb(244, 246, 246);
    height: 100%;

    .icon {
        font-size: 18px;
        color: #fff;
    }
}

.content {
    padding: 0 15px;
    // padding-top: 45px;
    // height: 100vh;

    .item {
        padding: 7.5px 0;

        .title {
            line-height: 2;


            span {
                // display: inline-block;
                word-break: break-all;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                /* 这里是超出几行省略 */
                overflow: hidden;
            }
        }

        .imgOnec {
            img {
                width: 80px;
                height: 80px;
            }

            display: flex;
            justify-content: space-between;
            // align-items: center;
        }

        .imgTwoc {
            display: flex;
            flex-direction: column;

            .image {
                display: flex;
                justify-content: space-evenly;
                align-items: center;

                img {
                    width: 80px;
                    height: 80px;
                }
            }
        }

        .imgThreec {
            display: flex;
            flex-direction: column;

            .image {
                display: flex;
                justify-content: space-around;
                align-items: center;

                img {
                    width: 80px;
                    height: 80px;
                }
            }
        }

        .footer {
            color: #969799;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 2;

            span {
                // display: inline-block;
                width: 25%;
                overflow: hidden;
                /* 超出一行文字自动隐藏 */
                text-overflow: ellipsis;
                /*文字隐藏后添加省略号*/
                white-space: nowrap;
                /*强制不换行*/
            }
        }
    }
}
</style>